<template>
  <div class="follow-view view-border q-pa-sm">
    <div class="row">
      <q-avatar size="34px">
        <q-img :src="video!.creatorAvatar" />
      </q-avatar>
      <div class="column q-ml-sm">
        <div class="hint-string">Video Creator</div>
        <div class="author-name">{{ video!.creatorName }}</div>
      </div>
      <q-space />
      <q-btn
        label="Follow"
        color="accent"
        no-caps
        v-close-popup
        v-singular-event:btn:follow
      ></q-btn>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import Video from 'src/models/Video';
import Audio from 'src/models/Audio';
export default defineComponent({
  props: {
    video: {
      type: Object as PropType<Video | undefined>,
      required: true,
    },
  },
  setup() {
    const authorList = ref([]);
    return {};
  },
});
</script>
<style lang="sass" scoped>
.follow-view
  width: 250px
.view-border
  border: 1px solid #404040
  border-radius: 6px
  background-color: rgba(35,35,35,1)
  padding: 6px 12px

.hint-string
  font-size: 10px
  color: $sub
.author-name
  font-size: 12px
</style>
